<template>
  <div class="container" >
   <el-dialog
  title="举报反馈"
  :visible.sync="showAccusation"
  width="505px"
  center
  :before-close="handleClose">

  <el-form 
  ref="form" 
  :model="form"
  :rules="rules"
  label-position="top"
   label-width="140px">
   <el-form-item label="举报类型（必选）" prop="type">
    <el-radio-group v-model="form.type">
      
      <el-radio v-for="item in options" :key="item.label" :label="item.label" >{{item.name}}</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="举报详情（选填）" >
    <el-input type="textarea"  placeholder="请详细描述举报原因，我们将第一时间核实处理" :autosize="{ minRows: 5, maxRows: 8}" v-model="form.remark"></el-input>
  </el-form-item>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="clickOk">确认举报</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import {addReport} from '@/api/news/pc-web/article'
export default {
  name: "Report",
  props:['articleId','showAccusation'],
  data() {
    return {
      form:{
        type: '',
        remark:''
      },
      options: [
        { 
          label:0,
          name:'其他问题'
        },
        { 
          label:1,
          name:'标题夸张'
        },
        { 
          label:2,
          name:'低俗色情'
        },
        { 
          label:3,
          name:'错别字多'
        },
        { 
          label:4,
          name:'旧闻重复'
        },
        { 
          label:5,
          name:'涉嫌广告'
        },
        { 
          label:6,
          name:'内容抄袭'
        },
        { 
          label:7,
          name:'政治相关'
        },
        { 
          label:8,
          name:'内容不实'
        },
        { 
          label:9,
          name:'涉嫌违法犯罪'
        },
        { 
          label:10,
          name:'侵犯名誉/隐私/著作/肖像权等'
        },
        // '举报类型： 0-其他问题，1-标题夸张，2-低俗色情，3-错别字多，4-旧闻重复，5-广告软文，6-内容不实，7-涉嫌违法犯罪，8-侵权'
      ],
      rules:{
        type:[
          { required: true, message: "举报类型（必选）", trigger: "change" },
        ]
      }
    };
  },
   methods:{
     clickOk(){
       this.$refs.form.validate(async (valid) => {
        if (valid) {
         const res = await  addReport({...this.form ,article_id:this.articleId})
        if(res) {
          this.$message.success('您已举报该篇文章，工作人员在24小时内审核出结果')
          this.$emit('showAccusation')
        }
        } else {
          // return false;
        }
      });
      
     },
     // 点击关闭对话框
      handleClose(done) {
        // done();
        this.$emit('showAccusation')
        // this.$refs.form.resetFields()
      }
    
  }
};
</script>
<style lang="scss" scoped>

.container {

  .el-radio{
    line-height:40px;
  }
  .el-button{
    width: 100%;
  }
  // .el-dialog .el-dialog--center{
  //   w
  // }
  
}
</style>
